<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en" >
	<head>
	  <meta charset="UTF-8">
	  <title>用户注册</title>
	  <link rel="stylesheet" href="css/register.css">
      <link rel="stylesheet" href="css/huakuai.css">
      <script type="text/javascript" src="js/style.js"></script>

	</head>
	<style type="text/css">
	  .error{
	  	color:RED;
	  	font-size:12px;
	  }
	  .success{
	  	color:green;
	  	font-size:12px;
	  }
	</style>
	<body>
		<div class="container">
			<div class="loginBox">
			    <!-- 1 头像预览效果 -->
				<div class="userImage">
					<img src="#" id="img3" />
				</div>
				<form id=""  method="post" action="${pageContext.request.contextPath}/account/register" enctype="multipart/form-data">
					<input type="hidden" name="op"  value="register">
					<div id="prompt3">
					    <!-- accept="image/jpg,image/jpeg,image/png" 限制上传文件的类型-->
						<input type="file" id="file" class="filepath" name="facePicture"  accept="image/jpg,image/jpeg,image/png">
					</div>
					<div class="input-wrapper">
						<label>账号:</label>
						<input type="text" name="accountName" placeholder="请输入用户名" required="required" id="accountName">
						<label id="accountNameTip" style="padding-left:0px"></label>
					</div>
					<div class="input-wrapper">
						<label>密码:</label>
						<input type="password" name="password" id="password" placeholder="密码" required="required">
					</div>

                    <div id="slideBar"></div>

					<%--<div class="input-wrapper">
						<label>手机号:</label>
						<input type="text" name="accountPhoneNumber" placeholder="请输入手机号" required="required" id="accountPhoneNumber">
						<label id="accountPhoneNumberTip" style="padding-left:0px"></label>
					</div>--%>
					<input type="submit" name="" value="注册" id="register">
				</form>
			</div>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        var dataList = ["0","1"];
        var options = {
            dataList: dataList,
            success:function(){
                console.log("show");
            },
            fail: function(){
                console.log("fail");
            }
        };
        SliderBar("slideBar", options);
    </script>
	<script type="text/javascript">
		$(document).ready(function(){
			//对用户名输入框做失去焦点事件
			$("#accountName").blur(function () {
				var accountName=$(this).val().trim();
				if (accountName==""){
					//输入框为空
					$("#accountNameTip").text("用户名不能为空");
					$("#accountNameTip").addClass("error");
				}else{
					$.ajax({
						async:true,
						url:"${pageContext.request.contextPath}/account/isExist",
						type:"post",
						data:{
							accountName:accountName
						},
						dataType:"json",
						success:function (result) {
							if (result==true){
								//用户名已存在
								$("#accountNameTip").text("用户名已存在");
								$("#accountNameTip").addClass("error");
								//注册按钮失效
								$("#register").prop("disabled",true);
							}else if (result==false) {
								//用户名不存在
								$("#accountNameTip").text("用户名可以使用");
								$("#accountNameTip").addClass("success");
								//注册按钮有效
								$("#register").prop("disabled",false);
							}
						},
						error:function () {
							alert("Ajax异步请求失败！！！");
						}
					})
				}
			})


            $("#file").change(function(){
                //照片预览功能
                $("#img3").attr("src",URL.createObjectURL($(this)[0].files[0]));

            });


		})
	</script>
</html>

















